import React, {FC, useEffect, useState} from 'react';
import { Layout,Dropdown,Modal  } from 'antd';
import '../assets/css/Index.css'
import type { MenuProps } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import {useNavigate, Outlet} from "react-router-dom";
import { Scrollbars } from 'react-custom-scrollbars';
const { Header } = Layout;
const Index: FC=()=> {
    const [menuUrl,setMenuUrl]:any = useState(JSON.parse(sessionStorage.getItem('menu') as any))
    const [username,] = useState(sessionStorage.getItem('username'))
    const [pageUrl,setPageUrl] = useState(sessionStorage.getItem('pageUrl'))
    const [menuTop,setMenuTop] = useState(menuUrl)
    const items: MenuProps['items'] =
        menuTop.map((item:any)=>({
            key: item.id,
            label: (
                <div className={`iconfont ${item.ico} topMenu ${item.url===pageUrl?'checkTop':''}`} onClick={menuTopUrl(item.url)}>
                    <span >{item.name}</span>
                </div>
            ),
        }))
    const navigator = useNavigate()
    //左侧导航栏&头部选中
    function menuTopUrl(url:any) {
        return ()=>{
            navigator(url)
            sessionStorage.setItem('pageUrl',url)
            setPageUrl(sessionStorage.getItem('pageUrl'))
        }
    }
    //首页
    const goHome = ()=>{
        navigator('/')
        sessionStorage.setItem('pageUrl','/')
        setPageUrl(sessionStorage.getItem('pageUrl'))
    }
    //退出登录
    const getOut = ()=>{
        Modal.confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '确定要退出吗？',
            okText: '确认',
            cancelText: '取消',
            onOk:()=>{
                sessionStorage.clear()
                navigator('/login')
            }
        });
    }
    useEffect(()=>{
        setMenuUrl(menuUrl.filter((item:any)=>(item.pid===0&&item.postion==='left')))
        setMenuTop(menuTop.filter((item:any)=>(item.pid===0&&item.postion==='top')))
    },[])
    return (
        <div className="index">
                <Header>
                    <div className="headerLeft">
                        <img src={require('../assets/images/logo.jpg')} alt=""/>
                        <div className={`iconfont icon-shouye-shouye ${pageUrl==='/'?'check':''}`} onClick={goHome}><span>首页</span></div>
                        <div>{username}，周末的晚霞，别有一番风景</div>
                    </div>
                    <div className="headerRight">
                        <Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }}>
                            <div className={`iconfont icon-xitong ${menuTop.some((item:any)=>pageUrl===item.url)?'checkRight':''}`}>
                                <span>
                                    设置
                                </span>
                            </div>
                        </Dropdown>
                        <div className="iconfont icon-tuichu" onClick={getOut}><span>退出登录</span></div>
                    </div>
                </Header>
                <div className="nav">
                    <div className="navLeft">
                        <div className="navigation">
                            <Scrollbars className="navroll" style={{height:'80vh'}}>
                                {menuUrl.map((item:any)=>(
                                    <div className={`navUrl ${item.url===pageUrl?'navUrlCheck':''}`} key={item.id} onClick={menuTopUrl(item.url)}>
                                        <div className={`iconfont ${item.ico}`} ></div>
                                        <div className="name">{item.name.replace(/(管理|信息)/g,'')}</div>
                                    </div>
                                ))}
                            </Scrollbars>
                        </div>
                    </div>
                    <div className="content"><Outlet></Outlet></div>
                </div>
        </div>
    );
}

export default Index;
